<template>
    <div class="container">
        <div class="rowOne">
            <p class="oneP">借助专业平台</p>
            <p class="twoP">实现高效准确的运营与变行是行业发展的大趋势</p>
        </div>
        <div class="rowTwo">
            <div class="left1">
              <div>
                <span v-for="(item,index) in list1" :key="index">{{item}}</span>
              </div>
              <p><span>管理粗糙，变现率低</span><img src="../../assets/img/mediaIn/professional/no.png" alt=""></p>
            </div>
            <div class="left2">
                <img src="../../assets/img/mediaIn/professional/arrow.png" alt="">
            </div>
            <div class="left3">
                <div>
                  <span v-for="(item,index) in list2" :key="index" style="font-weight:600;color:#222;">{{item}}</span>
                </div>
                <p><span>运营精细化，收入增加</span><img src="../../assets/img/mediaIn/professional/yes.png" alt=""></p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data(){
    return {
      list1:["资","源","碎","片","化"],
      list2:["资","源","整","合"]
    }
  }
};
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
.rowOne {
  margin-top: 80px;
  text-align: center;
}
.rowTwo {
  margin-top: 80px;
  overflow: hidden;
  position:relative;
  width:103%;
  padding:6px;
}
.left1 {
  width: 560px;
  height: 198px;
  background: url("../../assets/img/mediaIn/professional/59.png") center;
  background-size: 100%;
  float: left;
  overflow: hidden;
}
.left2 {
  float: left;
  width: 80px;
  height: 198px;
  text-align: center;
  line-height: 198px;
}
.left3 {
  width: 560px;
  height: 198px;
  background: url("../../assets/img/mediaIn/professional/60.png") center;
  background-size: 100%;
  float: right;
  margin-right:24px;
}
.left1 p{
  color:#999;
}
.left3 p{
  color:#222;
}
.left1>div:nth-child(1){
  margin-top: 62px;
}
.left1>div:nth-child(1)>span{
  font-size: 24px;
  color:#999;
  font-weight: bold;
  margin-left: 56px;
}
.left1>div:nth-child(1)>span:nth-child(1){
  margin-left: 109px;
}
.left3>div:nth-child(1){
  margin-top: 62px;
}
.left3>div:nth-child(1)>span{
  font-size: 24px;
  color:#999;
  font-weight: bold;
  margin-left: 56px;
}
.left3>div:nth-child(1)>span:nth-child(1){
  margin-left: 150px;
}
.left1>p:nth-child(2){
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-top: 50px;
}
.left1>p:nth-child(2)>img{
  margin-left: 10px;
}
.left3>p:nth-child(2){
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-top: 50px;
}
.left3>p:nth-child(2)>img{
  margin-left: 10px;
}
</style>


